<!--  -->
<template>
  <div class="my-container">
      <div class='header not-login' v-if="!user">
          <div class="login-btn" @click="$router.push('/login')">
              <img class="mobile-img" src="~@/assets/mobile.png" alt="">
              <span class="text">登录 注册</span>
          </div>
      </div>
      <div class="header user-info" v-if="user">
          <div class="base-info">
              <div class="left">
                  <van-image
                    class="avatar"
                    round
                    :src="userInfo.photo"
                  />
                  <span class="username">{{userInfo.name}}</span>
              </div>
              <div class="right">
                <van-button class="right-btn" color="#fff" @click="$router.push('edit')">编辑资料</van-button>
              </div>
          </div>
          <div class="data-stats">
            <div class="data-items">
              <span class="count">{{userInfo.art_count}}</span>
              <span class="text">头条</span>
            </div>
            <div class="data-items">
              <span class="count">{{userInfo.follow_count}}</span>
              <span class="text">关注</span>
            </div>
            <div class="data-items">
              <span class="count">{{userInfo.fans_count}}</span>
              <span class="text">粉丝</span>
            </div>
            <div class="data-items">
              <span class="count">{{userInfo.like_count}}</span>
              <span class="text">获赞</span>
            </div>
          </div>
      </div>
      <div >
        <van-grid clickable :column-num="2" class="grid-nav" >
          <van-grid-item to="/" >
            <i class="iconfont icon-shoucang"></i>
            <span class="text">收藏</span>
          </van-grid-item>
          <van-grid-item to="/" >
            <i class="iconfont icon-lishi"></i>
            <span class="text">历史</span>
          </van-grid-item>
        </van-grid>
      </div>
      <div class='cell-wrap'>
        <van-cell class="cell-text" title="消息通知" is-link />
        <van-cell class="cell-text" title="小智同学" is-link />
        <van-button class="not-login-btn" size="large" v-if="user" @click="onLogout">退出登录</van-button>
      </div>
  </div>
</template>

<script>
// mapState可以（响应式）的绑定vuex中的state
import { mapState } from 'vuex'
import { getUserInfo } from '@/api/user.js'
export default {
  data () {
    return {
      userInfo: {}
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    onLogout () {
      // 全局注册vant组件用此方法
      this.$dialog.confirm({
        title: '确认退出吗?',
        showCancelButton: true
      }).then(() => {
        // 点击确认按钮执行
        // 确认退出,清空vuex中的user数据（token），以及localStorage中的token
        this.$store.commit('saveToken', null)
      }).catch(() => {
        // 点击取消按钮执行
        console.log('取消')
      })
    },
    async localUserInfo () {
      try {
        const { data } = await getUserInfo()
        // console.log(data)
        this.userInfo = data.data
      } catch (error) {
        this.$toast('请求数据失败')
      }
    }
  },
  created () {
    if (this.user) {
      this.localUserInfo()
    }
  }
}
</script>
<style  scoped lang='less'>
.my-container {
  .header{
      height:361px;
      background: url('~@/assets/banner.png');
      background-size: cover;
  }
  .not-login {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .login-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .mobile-img {
          width: 132px;
          height: 132px;
      }
      .text {
          font-size: 36px;
          color: #fff;
          margin-top: 30px;
      }
  }
  .user-info {
    .base-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 76px 32px 23px;
        .left {
            display: flex;
            align-items: center;
            .avatar {
                width: 132px;
                height: 132px;
                border: 1px solid #fff;
            }
            .username {
                margin-left:20px;
                font-size: 40px;
                color: #fff;
            }
        }
        .right {
          display: flex;
          justify-content: center;
          align-items: center;
          .right-btn {
            height: 70px;
            color: rgb(1, 12, 29) !important;
            border-radius: 30px;
            box-shadow: 3px 3px 3px rgb(170, 167, 167)
          }
        }
    }
    .data-stats {
      display: flex;
      .data-items {
        height: 130px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content:center;
        align-items: center;
        color: #fff;
        .count {
          font-size: 36px;
        }
        .text {
          font-size: 23px;
        }
      }
    }
  }
  .grid-nav {
    height: 141px;
    i.iconfont {
      font-size: 45px;
    }
    i.icon-shoucang {
      color: rgb(14, 212, 226);
    }
    i.icon-lishi{
      color: rgb(230, 76, 16);
    }
    span.text {
      font-size: 28px;
      margin-top: 10px;
    }
  }
  .cell-wrap {
    .cell-text {
      font-size: 30px;
      color: rgb(11, 190, 152);
    }
    .not-login-btn {
      color: red;
    }
  }
}
</style>
